<!-- Dom页面 -->
<template>
  <div id="MainIndex">
    <!-- 顶部导航栏 -->
    <div class="topNav">
      <el-menu class="topNavMenu" mode="horizontal" background-color="#545c64" text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="0" style="position: absolute; left: 0px" title="系统名称">{{ sysName }}</el-menu-item>
        <!-- 菜单折叠按钮 -->
        <el-menu-item index="1" style="position: absolute; left: 140px" @click="closeMenu()">
          <i :class="isCollapse == true? 'el-icon-s-unfold': 'el-icon-s-fold' + ' iconColor'"></i>
        </el-menu-item>
        <el-menu-item index="2" title="查看消息"><i class="el-icon-bell iconColor"></i></el-menu-item>
        <el-menu-item index="3">
          <el-dropdown>
            <span class="el-dropdown-link iconColor">
              <el-avatar> user </el-avatar>
              &nbsp;<span>{{ userData.userId }}</span>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
        <el-menu-item index="4" title="退出登录" @click="toOutLogin()"><i class="el-icon-switch-button iconColor"></i></el-menu-item>
      </el-menu>
    </div>
    <!-- 主体内容 -->
    <div class="btoMain">
      <!-- 左侧菜单栏 -->
      <div class="menuDiv" :style="menuWidth">
        <el-menu :collapse="isCollapse" default-active="0" :collapse-transition="false" :router="true">
          <el-submenu :index="index + ''" v-for="(item, index) in treeData" :key="index">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{ item.menuName }}</span>
            </template>
            <el-menu-item-group v-for="(citem, cindex) in item.children" :key="cindex">
              <el-menu-item :index="citem.path" slot="title">{{ citem.menuName }}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
      <!-- 右侧页面内容 -->
      <div class="context">
        <!-- 面包屑 -->
        <div class="mbx"></div>
        <!-- 组件显示 -->
        <div class="mainContext">
          <!-- main.vue的子路由跳转 -->
          <router-view />
        </div>
        <!-- 辅助底部消息框体 -->
        <div class="btoMsgDiv"></div>
      </div>
    </div>
  </div>
</template>

<!-- 组件js -->
<script>
export default {
  name: "MainIndex",
  data() {
    return {
      //系统名称
      sysName: "保鲜仓助农平台",
      //用户信息
      userData: {
        userId: this.$cookies.get("userId"),
      },
      //左侧菜单打开状态
      isCollapse: false,
      //左侧菜单宽度
      menuWidth: {
        width: "210px",
      },
      //菜单数据
      menuData: [
        { menuId: "101", menuName: "我的保鲜仓", parentId: null },
        { menuId: "102", menuName: "保鲜仓申请", parentId: "101",path:"/warehouse/applWarehouse" },
        { menuId: "103", menuName: "管理保鲜仓", parentId: "101",path:"/warehouse/manageWarehouse" },
        { menuId: "104", menuName: "我的物资", parentId: null },
        { menuId: "105", menuName: "物资台账", parentId: "104" ,path:"/goods/table"},
        { menuId: "106", menuName: "数据分析", parentId: null },
        { menuId: "107", menuName: "仓库数据信息", parentId: "106" ,path:"/analysedata/warehouseData"},
        { menuId: "108", menuName: "物资统计信息", parentId: "106" ,path:"/analysedata/goodsCount"},
      ],
      //树形数据
      treeData: [],
    };
  },
  methods: {
    closeMenu() {
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse == true) {
        this.menuWidth.width = "57px";
      } else {
        this.menuWidth.width = "210px";
      }
    },
    toOutLogin(){
      //退出登录
      //1 .localstorage中的token和user清除
      window.localStorage.removeItem("user");
      window.localStorage.removeItem("token");
      // 2. 跳转页面到登录页面
      this.$router.push("/");
    }
  },
  mounted() {
    this.treeData = this.$myUtil.list2TreeData(this.menuData, null, "menuId");
  },
};
</script>

<!-- CSS代码 -->
<style scoped>
#MainIndex {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  overflow: hidden;
}

.topNav {
  width: 100vw;
  height: 60px;
  background-color: aqua;
}

.btoMain {
  width: 100vw;
  height: calc(100% - 60px);
  display: flex;
}

.menuDiv {
  width: 210px;
  background-color: #fff;
  overflow-y: auto;
  overflow-x: hidden;
}

.context {
  flex-grow: 1;
  background-color: #f2f6fc;
}

.mbx {
  width: 100%;
  height: 35px;
  background-color: #fff;
}

.mainContext {
  padding: 10px;
  width: calc(100% - 24px);
  height: calc(100% - 70px - 22px);
  margin: 11px 12px;
  background-color: #fff;
  border-radius: 5px;
}

.btoMsgDiv {
  width: 100%;
  height: 35px;
  background-color: #fff;
}

.topNavMenu {
  display: flex;
  justify-content: flex-end;
}

.iconColor {
  color: #fff;
}

/* --------------elementui内部样式----------------- */
.el-menu.el-menu--horizontal {
  border-bottom: solid 0px #e6e6e6 !important;
}
</style>
